<template>
  <div class="lineChart96" ref="lineChart96"></div>
</template>

<script>
import * as echarts from "echarts";
const gaugeData = [
  {
    value: 20,
    name: "Good",
    title: {
      offsetCenter: ["-50%", "80%"],
    },
    detail: {
      offsetCenter: ["-50%", "95%"],
    },
  },
  {
    value: 40,
    name: "Better",
    title: {
      offsetCenter: ["0%", "80%"],
    },
    detail: {
      offsetCenter: ["0%", "95%"],
    },
  },
  {
    value: 60,
    name: "Perfect",
    title: {
      offsetCenter: ["50%", "80%"],
    },
    detail: {
      offsetCenter: ["50%", "95%"],
    },
  },
];
let options = {
  series: [
    {
      type: "gauge",
      radius: "95%",
      center: ["50%", "52%"],
      anchor: {
        show: true,
        showAbove: true,
        size: 18,
        itemStyle: {
          color: "#FAC858",
        },
      },
      pointer: {
        icon: "path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z",
        width: 8,
        length: "80%",
        offsetCenter: [0, "8%"],
      },
      progress: {
        show: true,
        overlap: true,
        roundCap: true,
      },
      axisLine: {
        roundCap: true,
      },
      data: gaugeData,
      title: {
        fontSize: 14,
      },
      detail: {
        width: 40,
        height: 14,
        fontSize: 14,
        color: "#fff",
        backgroundColor: "inherit",
        borderRadius: 3,
        formatter: "{value}%",
      },
    },
  ],
};
export default {
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initchartFn();
    });
  },
  methods: {
    initchartFn() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(this.$refs.lineChart96);
      this.setOptionsFn();
    },
    setOptionsFn() {
      this.chart.setOption(options);
    },
  },
};
</script>

<style lang="less" scoped>
.lineChart96 {
  width: 100%;
  height: 100%;
}
</style>
